<template>
    <div class="example-page">
        <!-- 使用CompanySection组件 -->
        <CompanySection :companies="displayCompanies" :loading="isLoading" :error="errorMessage"
            @card-click="handleCompanyClick" @retry="handleRetry" />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import CompanySection from './CompanySection.vue';
import { companies } from '../../data/companies.js';

// 状态管理
const displayCompanies = ref([]);
const isLoading = ref(false);
const errorMessage = ref(null);

// 模拟数据加载
const loadCompanies = async () => {
    isLoading.value = true;
    errorMessage.value = null;

    try {
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 1000));

        // 模拟可能的错误（取消注释以测试错误状态）
        // throw new Error('加载企业数据失败，请稍后重试');

        displayCompanies.value = companies;
    } catch (error) {
        errorMessage.value = error.message;
        console.error('Error loading companies:', error);
    } finally {
        isLoading.value = false;
    }
};

// 处理企业卡片点击
const handleCompanyClick = (company) => {
    console.log('Company clicked:', company);
    // 这里可以添加额外的逻辑，如数据分析追踪
};

// 处理重试
const handleRetry = () => {
    loadCompanies();
};

// 组件挂载时加载数据
onMounted(() => {
    loadCompanies();
});
</script>

<style scoped>
.example-page {
    min-height: 100vh;
}
</style>
